<template>
<div class="pd10">

    <div class="yt yt-pj" style="margin-bottom:10px;">
        <div class="yt">
            <el-input @keyup.native.enter="searchUser($event)" v-model="iptsearch" placeholder="请输入内容"></el-input>
            <el-button @click="searchUser" type="primary" icon="el-icon-search" style="margin-left:10px;"></el-button>
        </div>
        <div>
            <el-button size="medium" type="success" icon=" el-icon-plus"><span class="">添加用户</span></el-button>
        </div>
    </div>

    <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">

        <el-table-column type="expand" width="50">
            <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="注册时间">
                        <span>{{ props.row.createdAt }}</span>
                    </el-form-item>
                    <el-form-item label="最后登录">
                        <span>{{ props.row.updatedAt }}</span>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-dropdown trigger="click" @command="handleForbid($event,props.row,props)">
                            <span class="el-dropdown-link">
                                {{status[props.row.status]}}<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="(item,key) in status" :key="key" :command="key">{{item}}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-form-item>
                </el-form>
            </template>
        </el-table-column>

        <el-table-column type="index" width="50">
        </el-table-column>
        <el-table-column property="id" label="ID" width="60">
        </el-table-column>
        <el-table-column property="head" label="头像" width="60">
            <template slot-scope="scope">
                <img :src="scope.row.head" class="tbhead">
            </template>
        </el-table-column>
        <el-table-column property="username" label="用户名" width="120">
        </el-table-column>
        <el-table-column property="nickname" label="昵称">
        </el-table-column>
        <el-table-column label="操作" width="340">
            <template slot-scope="scope">
                <el-button size="" @click.stop="handleEdit(scope.$index, scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChangePage" @current-change="handleCurrentChangePage" :current-page="currentPage" :page-sizes="[10,20]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total" style="background-color:#fff;padding:10px 0 10px 10px;">
    </el-pagination>

    <el-dialog title="修改用户属性" :visible.sync="dialogFormVisible" :before-close="handleDialogClose">

        <el-form>
            <el-form-item label="权限" :label-width="formLabelWidth">
                <el-checkbox-group v-model="ckbox_qualification">
                    <el-checkbox v-for="item in arr_qualification" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleDialogClose">取 消</el-button>
            <el-button type="primary" @click="handleEdit_confirm">确 定</el-button>
        </div>
    </el-dialog>

</div>
</template>

<script>
export default {
    data() {
        return {
            currentPage: 1,
            limit: 10,
            total: 0,
            iptsearch: '',
            dialogFormVisible: false,
            currentRow: '',
            tableData: [],
            ckbox_qualification: [],
            arr_qualification: [],
            formLabelWidth: '100px',
            status: {
                '0': '正常',
                '-1': '封禁中'
            }
        }
    },
    mounted() {
        this.$axios.get(this.$api.crudUser, {
                params: {
                    currentPage: this.currentPage,
                    limit: this.limit,
                }
            })
            .then((res) => {
                if (res.errCode === 1) {
                    this.tableData = res.data.rows
                    this.total = res.data.count
                }
            })
    },
    methods: {
        handleSizeChangePage(val) {
            console.log(`每页 ${val} 条`);
            this.limit = val
            this.currentPage=1;
            this.getUserList()
        },
        handleCurrentChangePage(val) {
            console.log(`当前页: ${val}`);
            this.currentPage=val;
            this.getUserList()
        },
        getUserList(){
                this.$axios.get(this.$api.crudUser, {
                    params: {
                        currentPage: this.currentPage,
                        limit: this.limit,
                    }
                })
                .then((res) => {
                    if (res.errCode === 1) {
                        this.tableData = res.data.rows
                        this.total = res.data.count
                    }
                })
        },
        searchUser() {
            console.log(this.iptsearch)
        },
        handleDialogClose() {
            this.dialogFormVisible = false
            this.ckbox_qualification = []
        },
        handleCurrentChange(val) {
            console.log(val)
            this.currentRow = val;
        },
        handleEdit(index, row) {
            //row是该行表格的所有数据
            this.dialogFormVisible = true
            //获取权限列表
            this.$axios.get(this.$api.crudQualification)
                .then((res) => {
                    this.arr_qualification = res.data
                    //获取该用户具有的权限
                    return this.$axios.get(this.$api.crudUser, {
                        params: {
                            id: row.id
                        }
                    })
                })
                .then((res) => {
                    if (res.data.qualification) {
                        let arr_qua = res.data.qualification.split(',')
                        this.ckbox_qualification = arr_qua.map(v => Number(v))
                    }
                })
        },
        handleEdit_confirm() {
            this.$axios.post(this.$api.crudUser, {
                    qualification: this.ckbox_qualification.join(',')
                })
                .then((res) => {
                    if (res.errCode === 1) {
                        this.$message.success({
                            message: "修改成功",
                            duration: 700,
                            onClose: () => {
                                this.dialogFormVisible = false
                                this.ckbox_qualification = []
                            }
                        });
                    } else {
                        this.$message.error({
                            message: "修改失败" + res.msg,
                            duration: 1000
                        });
                    }
                })
        },
        handleForbid(cmdVal, row, prop) {
            this.$axios.get(this.$api.crudUser, {
                    params: {
                        api: 'forbidden',
                        id: row.id,
                        status: cmdVal
                    }
                })
                .then(() => {
                    row.status = cmdVal
                    this.tableData[prop.$index] = row
                    this.tableData.splice(prop.$index, 1, row)
                })
        }
    }
}
</script>

<style>
.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}

.tbhead {
    width: 40px;
    height: 40px;
}
</style>
